<template>
  <el-dialog
    v-model="visible"
    :close-on-click-modal="false"
    title="取餐详情"
    draggable
    :loading="loading"
    width="1000px"
    @close="formRef.resetFields()"
  >
    <el-form :inline="true" ref="formRef" :model="queryParams">
      <el-form-item label="手机号" prop="mobile">
        <el-input
          v-model.trim="queryParams.mobile"
          placeholder="请输入"
          clearable
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="房间号/工位号" prop="remark">
        <el-input
          v-model="queryParams.remark"
          placeholder="请输入"
          clearable
          @keyup.enter="handleQuery"
        />
      </el-form-item>

      <el-form-item label="状态" prop="status">
        <el-select v-model="queryParams.status" placeholder="请选择" clearable>
          <el-option
            v-for="item in statusList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="&nbsp;">
        <el-button type="primary" @click="handleQuery()">查询</el-button>
        <el-button @click="handleReset()">重置</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="detailsList" style="width: 100%">
      <el-table-column prop="mobile" label="手机号" align="center" />
      <el-table-column prop="comboName" label="餐食名称" align="center" />
      <el-table-column prop="comboNum" width="50" label="份数" align="center" />
      <el-table-column prop="comboPrice" width="100" label="餐食价格" sortable align="center" />
      <el-table-column prop="remark" width="120" label="房间号/工位号" align="center" />
      <el-table-column prop="finishTime" label="取餐时间" align="center" />
      <el-table-column prop="status" label="状态" align="center" />
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />
  </el-dialog>
</template>
<script setup>
import { getEnterpriseCouponDetailsApi } from '@/api/marketing/tool/coupon'
import { parseTime } from '@/utils/tools'

const statusList = [
  { value: 1, label: '已取餐' },
  { value: 0, label: '未取餐' }
]
const visible = ref(false)
const loading = ref(false)
const formRef = ref()
const total = ref(0)
const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
  mobile: null,
  status: null,
  remark: null,
  orderSn: null
})
const detailsList = ref([])
/**获取列表数据 */
function getList() {
  loading.value = true
  getEnterpriseCouponDetailsApi(queryParams.value)
    .then((res) => {
      console.log(res)
      total.value = res.data?.total
      detailsList.value = res.data?.rows.map((item) => {
        return {
          ...item,
          finishTime: parseTime(item.finishTime),
          status: item.status === 'Finish' ? '已取餐' : '未取餐'
        }
      })
    })
    .finally(() => {
      loading.value = false
    })
}
function handleReset() {
  formRef.value.resetFields()
  getList()
}
function handleQuery() {
  queryParams.value.pageNum = 1
  getList()
}
/**初始化 */
function init(orderSn) {
  queryParams.value.orderSn = orderSn
  getList()
  visible.value = true
}

defineExpose({
  init
})
</script>
<style lang="scss" scoped>
.el-input {
  width: 215px;
}

:deep(.el-pagination) {
  right: 20px !important;
}
</style>
